<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
    </style>
</head>
<body>
   <!-- beforeCreate()
   create()
   beforeMount()
   mounted(  $nextTick()   )
   beforeUpdate()
   updated( $nextTick() )
   beforeDestory()
   destoryed() -->
    <div id="app">
        <child v-if="isShow"></child>
        <!-- 如果改成v-show则不会调用destroyed钩子函数 -->
        <button @click="isShow = false;msg = '123'">隐藏</button>
    </div>
    <script>
        Vue.component("child",{
            template:`
                <div>
                    子组件1
                </div>
            `,
            beforeDestroy(){
                console.log("组件即将被删除")
            },
            destroyed(){
                console.log("组件已经被删除")
            }
        })
        const app = new Vue({
            el:"#app",
            data: {
                msg:"hello,world",
                isShow: true,
            },
            beforeCreate(){
                console.log("实例初始化完成，但是数据观测和方法的运算还没有完成  " + this.msg);
            },
            created(){
                console.log("页面初始化完成，数据观测和方法的运算完成，但是挂载还没有开始  $el property 不可用" + this.msg);
            },
            beforeMount(){
                console.log("挂载之前执行  render函数（生成DOM的操作）首次被调用" + this.msg);
            },
            mounted(){
                this.$nextTick(()=>{
                    console.log("页面挂载完成  " + this.msg);
                })
                //常常用于如下场景：DOM访问，swiper(轮播图实现)，事件监听，ajax请求，定时器处理等
                // 注意 mounted 不会保证所有的子组件也都一起被挂载。可以在 mounted 内部使用 vm.$nextTick，等到整个视图都渲染完毕：
            },
            beforeUpdate(){
                console.log("数据更新之前被调用" + this.msg);
            },
            updated(){
                this.$nextTick(()=>{
                   console.log("数据更新完毕" + this.msg);
                })
                
            }

        });

    </script>



    <!-- 生命周期:每个Vue实例被加载的时候，都会伴随一系列的操作，比如状态的挂载和更新等等。可以使用钩子函数在特定的时候添加自己的操作 -->
</body>
</html>